<template>
  <div class='m-message'>
    <el-form :inline='true'>
      <el-form-item label='消息状态'>
        <a-select :options='statusList' v-model='status' />
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click='searchFun'>搜索</el-button>
      </el-form-item>
    </el-form>
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='180' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button size='mini' @click='choose(scope.row.biz_object_id)'>详情</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'm-message',

  data() {
    const filterTime = (value) => {
      const d = new Date(parseInt('' + value + '000', 10))
      return window.$tools.formatDate(d)
    }
    const filterStatus = (value) => {
      return value === '0' ? '未读' : '已阅读'
    }
    return {
      tableKeys: [
        { prop: 'title', label: '消息标题', minWidth: '100' },
        { prop: 'sender', label: '发送人', minWidth: '100' },
        { prop: 'time', label: '发送时间', minWidth: '100', filter: filterTime },
        { prop: 'status', label: '阅读状态', minWidth: '100', filter: filterStatus }
      ],
      data: [],
      ifRequesting: false,
      status: '',
      statusList: [
        { value: '0', label: '所有消息' },
        { value: '', label: '未读消息' },
        { value: '1', label: '已读消息' }
      ]
    }
  },

  mounted() {
    this.searchFun()
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    async fetchData(aPageNum, aPageSize) {
      const param = {
        aFirmId: this.aFirmId,
        aPageNum,
        aPageSize,
        aType: this.status
      }
      return this.$api.userGetMsgList(param)
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    getData(data) {
      this.data = data
    },

    choose(id) {
      const query = { type: 'set', id }
      this.routerPush('message_detail', { query })
      this.$router.push({ name: 'message_detail', query })
    }
  }
}
</script>

<style lang='less'>

</style>